// 方向
$direction: top, right, bottom, left;
// 边距
$spacing: 6rpx;
// 圆角
$rounded-size: 4rpx;
// 边框粗细
$border-size: 2rpx;
// 背景颜色
$color-list: (
    "white":#FFFFFF,
    "primary":$uni-color-primary,
    "primary-light-1":lighten($uni-color-primary,10%),
    "primary-light-2":lighten($uni-color-primary,20%),
    "primary-light-3":lighten($uni-color-primary,30%),
    "primary-dark-1":darken($uni-color-primary,10%),
    "primary-dark-2":darken($uni-color-primary,20%),
    "primary-dark-3":darken($uni-color-primary,30%),
    "success":$uni-color-success,
    "success-light-1":lighten($uni-color-success,10%),
    "success-light-2":lighten($uni-color-success,20%),
    "success-light-3":lighten($uni-color-success,30%),
    "success-dark-1":darken($uni-color-success,10%),
    "success-dark-2":darken($uni-color-success,20%),
    "success-dark-3":darken($uni-color-success,30%),
    "warning":$uni-color-warning,
    "warning-light-1":lighten($uni-color-warning,10%),
    "warning-light-2":lighten($uni-color-warning,20%),
    "warning-light-3":lighten($uni-color-warning,30%),
    "warning-dark-1":darken($uni-color-warning,10%),
    "warning-dark-2":darken($uni-color-warning,20%),
    "warning-dark-3":darken($uni-color-warning,30%),
    "danger":$uni-color-error,
    "danger-light-1":lighten($uni-color-error,10%),
    "danger-light-2":lighten($uni-color-error,20%),
    "danger-light-3":lighten($uni-color-error,30%),
    "danger-dark-1":darken($uni-color-error,10%),
    "danger-dark-2":darken($uni-color-error,20%),
    "danger-dark-3":darken($uni-color-error,30%),
	"dark":$uni-text-color,
    "dark-light-1":lighten($uni-text-color,10%),
    "dark-light-2":lighten($uni-text-color,20%),
    "dark-light-3":lighten($uni-text-color,30%),
    "dark-light-4":lighten($uni-text-color,40%),
    "dark-light-5":lighten($uni-text-color,50%),
    "dark-dark-1":darken($uni-text-color,10%),
    "dark-dark-2":darken($uni-text-color,20%),
    "dark-dark-3":darken($uni-text-color,30%),
    "hover":$uni-bg-color-hover,
    "mask":$uni-bg-color-mask,
    "placeholder":$uni-text-color-placeholder,
    "disable":$uni-text-color-disable,
	"grey":$uni-bg-color-grey,
	"border-color":$uni-border-color
);

.py-safe-area,.pb-safe-area {
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.py-safe-area,.pt-safe-area {
    padding-top: constant(safe-area-inset-top) !important;
    padding-top: env(safe-area-inset-top) !important;
}

.mx-auto,
.ml-auto {
    margin-left: auto !important;
}

.mx-auto,
.mr-auto {
    margin-right: auto !important;
}

@for $i from 0 through 10 {

    .p-#{$i},
    .pl-#{$i},
    .px-#{$i} {
        padding-left: $spacing * $i !important;
    }

    .p-#{$i},
    .pr-#{$i},
    .px-#{$i} {
        padding-right: $spacing * $i !important;
    }

    .p-#{$i},
    .pt-#{$i},
    .py-#{$i} {
        padding-top: $spacing * $i !important;
    }

    .p-#{$i},
    .pb-#{$i},
    .py-#{$i} {
        padding-bottom: $spacing * $i !important;
    }

    .m-#{$i},
    .ml-#{$i},
    .mx-#{$i} {
        margin-left: $spacing * $i !important;
    }

    .m-#{$i},
    .mr-#{$i},
    .mx-#{$i} {
        margin-right: $spacing * $i !important;
    }

    .m-#{$i},
    .mt-#{$i},
    .my-#{$i} {
        margin-top: $spacing * $i !important;
    }

    .m-#{$i},
    .mb-#{$i},
    .my-#{$i} {
        margin-bottom: $spacing * $i !important;
    }

    .top-#{$i} {
        top: $spacing * $i !important;
    }

    .left-#{$i} {
        left: $spacing * $i !important;
    }

    .right-#{$i} {
        right: $spacing * $i !important;
    }

    .bottom-#{$i} {
        bottom: $spacing * $i !important;
    }

    .top--#{$i} {
        top: -$spacing * $i !important;
    }

    .left--#{$i} {
        left: -$spacing * $i !important;
    }

    .right--#{$i} {
        right: -$spacing * $i !important;
    }

    .bottom--#{$i} {
        bottom: -$spacing * $i !important;
    }
}

.flex {
    display: flex;

    @each $var in wrap,
    nowrap {
        &-#{$var} {
            flex-wrap: $var;
        }
    }

    @each $var in column,
    row {
        &-#{$var} {
            flex-direction: $var;
        }
    }

    @each $var in center,
    baseline,
    flex-start,
    flex-end {
        &-y-#{$var} {
            align-items: $var;
        }
    }

    @each $var in center,
    flex-start,
    flex-end,
    space-around,
    space-between,
    space-evenly {
        &-x-#{$var} {
            justify-content: $var;
        }
    }

    @for $i from 1 through 12 {
        &-#{$i} {
            flex: $i;
            min-width: 0;
        }
    }

    &-center {
        align-items: center;
        justify-content: center;
    }
}

[class*="grid-columns-"] {
    display: grid;
}

.grid {
    display: grid;
    grid-template-columns: repeat(24, minmax(0px, 1fr));

    @for $i from 1 through 23 {
        &-columns-#{$i} {
            grid-template-columns: repeat($i, minmax(0px, 1fr));
        }
    }

    @for $i from 1 through 10 {

        &-gap-#{$i} {
            gap: $spacing * $i !important;
        }
    }

    @for $i from 1 through 24 {
        &-column-#{$i} {
            grid-column: span $i / span $i;
        }
    }
}

@each $var in relative,
absolute,
fixed,
sticky {
    .position-#{$var} {
        position: $var;
    }
}

@for $i from 1 through 20 {
    .vh-#{$i * 5} {
        height: $i * 5vh;
    }

    .vw-#{$i * 5} {
        width: $i * 5vw;
    }

    .h-#{$i * 5} {
        height: $i * 5%;
    }

    .w-#{$i * 5} {
        width: $i * 5%;
    }

    .min-h-#{$i * 5} {
        min-height: $i * 5%;
    }

    .min-w-#{$i * 5} {
        min-width: $i * 5%;
    }

    .min-vh-#{$i * 5} {
        min-height: $i * 5vh;
    }

    .min-vw-#{$i * 5} {
        min-width: $i * 5vw;
    }
}

.bg-filter {
    backdrop-filter: blur(12rpx);
}

page{
	@each $key,
	$color in $color-list {
			--xl-#{$key}:#{$color};
		.bg-#{$key},
		.hover-bg-#{$key}:hover {
			background-color: var(--xl-#{$key});
		}
		.text-#{$key}{
			color: var(--xl-#{$key});
		}
		@each $i in $direction {

			.border-#{$key},
			.border-#{$i}-#{$key} {
				border-#{$i}-color: var(--xl-#{$key});
			}

			.border-hover-#{$key}:hover,
			.border-hover-#{$i}-#{$key}:hover {
				border-#{$i}-color: var(--xl-#{$key});
			}
		}
	}
}



.text {

    @each $var in nowrap,
    wrap {
        &-#{$var} {
            white-space: $var;
        }
    }

    @each $var in break-all,
    break-word,
    keep-all {
        &-#{$var} {
            word-break: $var;
        }
    }

    @for $i from 1 through 5 {
        &-ellipsis-#{$i} {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: $i;
            -webkit-box-orient: vertical;
        }
    }

    @for $i from 1 through 10 {
        &-spacing-#{$i} {
            word-spacing: $i * 0.53333vw;
        }
    }

    @each $var in left,
    center,
    right,
    initial {
        &-#{$var} {
            text-align: $var;
        }
    }

    @each $var in capitalize,
    uppercase,
    lowercase {
        &-#{$var} {
            text-transform: $var;
        }
    }

    &-s {
        text-decoration: line-through;
    }
}

@each $i in $direction {

    .border,
    .border-#{$i} {
        border-#{$i}-width: $border-size;
        border-#{$i}-style: solid;
        border-#{$i}-color: var(--xl-border-color);
    }
}

@for $i from 0 through 6 {
    @each $n in $direction {

        .border-#{$i},
        .border-#{$n}-#{$i} {
            border-#{$n}-width: $i * $border-size;
        }
    }
}

@each $i in dotted,
dashed,
double,
groove,
ridge,
inset,
outset {
    @each $n in $direction {

        .border-#{$i},
        .border-#{$n}-#{$i} {
            border-#{$n}-style: $i;
        }
    }
}

.rounded-circle {
    border-radius: 50% !important;
}

.rounded-round {
    border-radius: 999px !important;
}

@for $i from 0 through 6 {
    @if $i ==1 {

        .rounded,
        .rounded-left,
        .rounded-bottom,
        .rounded-bottom-left {
            border-bottom-left-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-left,
        .rounded-top,
        .rounded-top-left {
            border-top-left-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-right,
        .rounded-bottom,
        .rounded-bottom-right {
            border-bottom-right-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-right,
        .rounded-top,
        .rounded-top-right {
            border-top-right-radius: $i * $rounded-size;
        }
    }

    @else {

        .rounded-#{$i},
        .rounded-left-#{$i},
        .rounded-bottom-#{$i},
        .rounded-bottom-left-#{$i} {
            border-bottom-left-radius: $i * $rounded-size !important;
        }

        .rounded-#{$i},
        .rounded-left-#{$i},
        .rounded-top-#{$i},
        .rounded-top-left-#{$i} {
            border-top-left-radius: $i * $rounded-size !important;
        }

        .rounded-#{$i},
        .rounded-right-#{$i},
        .rounded-bottom-#{$i},
        .rounded-bottom-right-#{$i} {
            border-bottom-right-radius: $i * $rounded-size !important;
        }

        .rounded-#{$i},
        .rounded-right-#{$i},
        .rounded-top-#{$i},
        .rounded-top-right-#{$i} {
            border-top-right-radius: $i * $rounded-size !important;
        }
    }
}

.font-weight {
    &-bold {
        font-weight: bold;
    }

    &-normal {
        font-weight: normal;
    }

    @for $i from 1 through 9 {
        &-#{$i * 100} {
            font-weight: $i * 100;
        }
    }
}

@for $i from 1 through 10 {
    .h#{$i} {
        font-size: 64rpx - ($i * 4rpx);
    }
}

.line-height {
    line-height: 1;

    @for $i from 1 through 10 {
        &-#{$i} {
            line-height: 40rpx + ($i * 4rpx);
        }
    }
}

@each $i in hidden,
visible,
auto,
scroll {

    .overflow-#{$i},
    .overflow-x-#{$i} {
        overflow-x: $i;
    }

    .overflow-#{$i},
    .overflow-y-#{$i} {
        overflow-y: $i;
    }
}
.uni-scroll-view::-webkit-scrollbar:horizontal{
	height: 0;
}
.bg-shop {
	background-image: linear-gradient(160deg, var(--xl-primary-dark-2) 20%, var(--xl-primary-light-2) 60%);
}
uni-input{
	height: auto;
	line-height: 1;
}
page{
	background-color: var(--xl-grey);
}
uni-toast{
    z-index: 9999;
}
.banner-swiper {
	.uni-swiper-dot{
        background-color: var(--xl-primary-light-2);
        &.uni-swiper-dot-active{
            background-color: var(--xl-primary);
        }
    }
}
